<template>
	<view class="page">
		<view class="hospital-cards">
			<view class="hospital-card" v-for="(item, index) in dataSource" :key="index" @click="toDetail(item)">
				<img v-if="item.image" :src="hostApi+item.image" alt="Hospital Image" class="hospital-image">
				<img v-else :src="image" alt="Hospital Image" class="hospital-image">
				<view class="hospital-info">
					<h3 class="hospital-name">{{ item.name }}</h3>
					<view class="info-item" @click.stop="toMap(item)">
						<img src="/static/images/icon/address-icon.png" class="icon-img" />
						<text class="hospital-address">{{ item.address }}</text>
					</view>
					<view class="info-item">
						<img src="/static/images/icon/phone-icon.png" class="icon-img" />
						<text class="hospital-phone">{{ item.phone }}</text>
					</view>
					<view class="info-item" v-if="item.busPath">
						<img src="/static/images/icon/bus.png" class="icon-img" />
						<text class="hospital-phone">{{ item.busPath }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectCampus
	} from '../../api/campus';
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['hostApi']),
		},
		data() {
			return {
				image: "/static/images/campus/yq.jpg",
				dataSource: []
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				selectCampus({
					orderBy: 'sort'
				}).then(res => {
					this.dataSource = res;
					console.log(res)
				})
			},
			toDetail(hospital) {
				uni.navigateTo({
					url: `/pages/Introduce/hospital?info=${JSON.stringify(hospital)}`
				})
			},
			async toMap() {
				// // 步骤1：获取用户当前位置
				// const location = await this.getUserLocation();

				// // 步骤2：设置目的地坐标（示例坐标：北京天安门）
				// const destination = {
				// 	latitude: 39.908823,
				// 	longitude: 116.397470,
				// 	name: '天安门广场'
				// };

				// // 步骤3：构造百度地图URL
				// const url = this.generateBaiduMapUrl(location, destination);
				// console.log(url)
				// // 步骤4：跳转到百度地图
				// uni.navigateTo({
				// 	url: `/pages/Introduce/webview?url=${encodeURIComponent(url)}`
				// });
				// uni.navigateTo({
				// 	url: '/pages/webview/webview'
				// })
				// } catch (error) {
				// 	uni.showToast({
				// 		title: error.message || '打开地图失败',
				// 		icon: 'none'
				// 	});
				// }


			},
			// 获取用户当前位置
			getUserLocation() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	}
				// });
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'wgs84', // 必须使用国测局坐标
						success: (res) => {
							resolve({
								latitude: res.latitude,
								longitude: res.longitude
							});
						},
						fail: (error) => {
							console.log(error)
							reject(new Error('获取位置失败，请检查定位权限'));
						}
					});
				});
			},
			// 生成百度地图导航URL
			generateBaiduMapUrl(origin, destination) {
				return `baidumap://map/direction?` +
					`origin=${origin.latitude},${origin.longitude}` +
					`&destination=${destination.latitude},${destination.longitude}` +
					`&destination_name=${encodeURIComponent(destination.name)}` +
					`&coord_type=gcj02` + // 坐标类型
					`&mode=driving` + // 驾驶模式（walking:步行, transit:公交）
					`&src=yourAppName`; // 替换为你的应用名称
			}
		}
	};
</script>

<style scoped>
	.hospital-cards {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		padding: 16rpx;
	}

	.hospital-card {
		border: 1rpx solid #eee;
		border-radius: 18rpx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 16rpx;
	}

	.hospital-image {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}

	.hospital-info {
		padding: 10rpx;
	}

	.hospital-name {
		font-size: 16px;
		margin-bottom: 15rpx;
		margin-left: 20rpx;
		color: #333;
		font-weight: bold;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
		color: #666;
	}

	.icon-img {
		width: 16px;
		height: 16px;
		margin-right: 12rpx;
	}

	.hospital-address,
	.hospital-phone {
		flex: 1;
		font-size: 14px;
		margin: 2px 0;
	}
</style>